import React, { Component, createRef } from "react";
import {
  PageHeader,
  Button,
  Space,
  Table,
  Tag,
  Pagination,
  message,
} from "antd";
import styled from "styled-components";
import url from "@/config/url";
import axios from "@/http/http";
import Modalcom from "@/components/Modalcom";
class Index extends Component {
  constructor() {
    super();
    // 表格
    this.columns = [
      {
        title: "序号",
        dataIndex: "id",
        align: "center",
        // render: (text) => <a>{text}</a>,
      },
      {
        title: "用户名",
        dataIndex: "username",
        align: "center",
      },
      {
        title: "手机号",
        dataIndex: "mobile",
        align: "center",
      },
      {
        title: "邮箱",
        dataIndex: "email",
        align: "center",
      },

      {
        title: "性别",
        dataIndex: "gender",
        align: "center",
        render: (text, record, index) => {
          // return  record.gender == 1?<Tag color={'geekblue'}>男</Tag>:<Tag color={'green'}>女</Tag>
          if (record.gender == 1) {
            return <Tag color={"geekblue"}>男</Tag>;
          }
          if (record.gender == 2) {
            return <Tag color={"green"}>女</Tag>;
          }
          if (record.gender == 3) {
            return <Tag color={"red"}>保密</Tag>;
          }
        },
      },
      {
        title: "状态",
        dataIndex: "status",
        align: "center",
        render: (text, record, index) => {
          return record.status == 1 ? (
            <Tag color={"geekblue"}>正常</Tag>
          ) : (
            <Tag color={"green"}>禁用</Tag>
          );
        },
      },
      {
        title: "操作",
        key: "action",
        align: "center",
        render: (text, record, index) => (
          <Space size="middle">
            <Button
              type="primary"
              onClick={() => this.editFn(text, record, index)}
            >
              编辑
            </Button>
            <Button
              type="danger"
              onClick={() => this.delete(text, record, index)}
            >
              删除
            </Button>
          </Space>
        ),
      },
    ];
  }
  state = {
    page: 1,
    total: 0,
    data: [],
    modalTitle: "",
    userinfo: {
      username: "",
      password: "",
      email: "",
      gender: 1,
      mobile: "",
    },
    id: "",
  };
  ref1 = createRef();
  render() {
    return (
      <div>
        <Title>
          {/* 页头 */}
          <PageHeader
            className="site-page-header"
            title="用户列表"
            extra={[
              <Button key={1} type="primary" onClick={this.adduserFn}>
                添加
              </Button>,
            ]}
          />
        </Title>
        {/* 表格 */}
        <Table
          pagination={false}
          columns={this.columns}
          dataSource={this.state.data}
          rowKey={(record) => {
            return record.id;
          }}
        />
        {/* 分页器 */}
        <Pagination
          current={this.state.page}
          total={this.state.total}
          onChange={this.onChange}
        />
        {/* 模态框 */}
        <Modalcom
          ref={this.ref1}
          modalTitle={this.state.modalTitle}
          getuserData={this.getuserData}
          id={this.state.id}
        ></Modalcom>
      </div>
    );
  }
  componentDidMount() {
    this.getuserData();
  }
  // 分页器事件
  onChange = (page) => {
    this.setState(
      {
        page: page,
      },
      () => this.getuserData()
    );
  };
  // 请求列表数据
  getuserData = () => {
    axios
      .get(url.getuserlist, {
        params: {
          page: this.state.page,
        },
      })
      .then((res) => {
        // console.log(res)
        this.setState({
          page: res.data.paginate.current_page,
          total: res.data.paginate.total,
          data: res.data.paginate.data,
        });
      })
      .catch((e) => {});
  };
  // 添加用户
  adduserFn = () => {
    this.ref1.current.showModal();
    this.setState({
      modalTitle: "添加用户",
    });
  };
  // 编辑
  editFn = (record) => {
    // console.log(this.ref1)
    this.ref1.current.showModal();
    this.setState(
      {
        modalTitle: "修改用户",
        id: record.id,
      },
      () => {
        this.ref1.current.edituserFn();
      }
    );

    // console.log(record);
    // this.ref1.current.onChange()
    // const {username,gender,email,mobile,id} = this.ref1.current.state.userinfo
    // console.log(this.ref1.current.state.userinfo)
    // axios.put(url.edituser+record.id,record).then(res=>{
    //     console.log(res)
    // }).catch(e=>{})
  };
  delete = (record) => {
    axios
      .delete(url.deleteuser + record.id)
      .then((res) => {
        console.log(res);
        if (res.data.errNo === 0) {
          message.success("删除成功", 1, () => {
            this.getuserData();
          });
        } else {
          message.error(res.data.errText, 1);
        }
      })
      .catch((e) => {});
  };
}

// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
// ];

const Title = styled.div`
  .site-page-header {
    border: 1px solid rgb(235, 237, 240);
  }
`;

export default Index;
